<template>
  <div class="vote_item">
    <div class="vote_content p15">
      <!-- 轮播图 -->
      <Swipe :autoplay="3000" class="my-swipe" lazy-render>
        <SwipeItem
          v-for="image in images"
          :key="image"
          @click="handleImg(image)"
        >
          <img :src="image" alt="" />
        </SwipeItem>
      </Swipe>
    </div>
    <!-- 用户信息 -->
    <div class="ml15 mr15">
      <p><span>名称：</span>{{ itemInfo.candidateName }}</p>
      <p class="mt05"><span>作者：</span>{{ itemInfo.authorName }}</p>
      <p class="mt05"><span>所属工会：</span>{{ itemInfo.orgName }}</p>
      <p v-if="groupName" class="mt05"><span>分组：</span>{{ groupName }}</p>
      <p class="mt05"><span>详情介绍：</span></p>
      <div
        class="p8 set_line"
        v-html="decodeURIComponent(itemInfo.candidateDesc || '')"
      ></div>
    </div>
  </div>
  <div class="vote_btn">
    <span class="share_btn" @click="shareSurvey()">分享</span>
    <ActiveBtn
      v-if="voteInfo.appBizVoteSetting.votePattern === 'bydirectly'"
      :vote-item="itemInfo"
      @submit="voteSubmit()"
    />
  </div>
  <Button class="back_btn" round type="primary" @click="router.back()">
    <van-icon class="rotate" name="down" />
    返回
  </Button>
</template>
<script setup>
import { apiCheckToken } from "@/server/business/survey.js";
import { getItemInfo, getVoteinfo } from "@/server/business/vote.js";
import { setWeappToken } from "@/utils/auth.js";
import { getUrlQuery, share, wxPageRedirect } from "@/utils/common.js";
import { Button, Swipe, SwipeItem } from "vant";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import ActiveBtn from "./components/activeBtn.vue";
import { handleSubmit } from "./components/control.js";
import { store } from "./components/store.js";

const voteInfo = ref(store.voteInfo);
const itemInfo = ref({});
const route = useRoute();
const router = useRouter();
const images = ref([]);
const groupName = ref({});
const useQuery = getUrlQuery(); // url获取数据
// 投票操作
const voteSubmit = () => {
  handleSubmit();
};
// 点击图片
const handleImg = (img) => {
  // showImagePreview({images: imgs, startPosition: idx})
  wxPageRedirect("../downImg/downImg?url=" + img);
};
// 分享 生成二维码
const shareSurvey = () => {
  let query = route.query;
  let search = "?";
  query.token = "#token#";
  for (let key in query) {
    search += key + "=" + query[key] + "&";
  }
  share(location.origin + location.pathname + search + "type=h5&isShare=y");
};
// 获取候选项想起信息
const getInfo = () => {
  getItemInfo({ get_request: { candidateId: route.query.candidateId } }).then(
    (res) => {
      itemInfo.value = res.data || {};
      images.value = res.data.sloganUrls || [];
      groupName.value =
        (voteInfo.value.appBizVoteGroup || []).filter(
          (item) => item.voteGroupId === res.data.voidGroupId
        )[0]?.groupName || "";
    }
  );
};
// 获取 投票信息
const getVoteContent = async () => {
  let info = await getVoteinfo({ voteId: route.query.id });
  for (let key in info.data) {
    voteInfo.value[key] = info.data[key] || {};
    localStorage[key] = JSON.stringify(info.data[key] || {});
    if (!info.data.appBizVoteGroup) {
      voteInfo.value.appBizVoteGroup = [];
      localStorage.appBizVoteGroup = JSON.stringify([]);
    }
  }
};
// 获取登录者信息
const getUserInfo = async () => {
  if (!useQuery.token || ["#token%23", "#token#"].includes(useQuery.token))
    return (localStorage.userInfo = "");
  setWeappToken(useQuery.token);
  let res = await apiCheckToken({ memberUserToken: useQuery.token });
  localStorage.userInfo = JSON.stringify(res.data);
  for (let key in res.data) {
    store.userInfo.value[key] = res.data[key];
  }
};
// 初始化
const init = () => {
  if (route.query.isShare === "y") {
    getUserInfo();
    getVoteContent();
  }
  getInfo();
};
init();
</script>
<style scoped>
.my-swipe {
  border-radius: 0.4rem;
  overflow: hidden;
}

.my-swipe :deep(.van-swipe-item) {
  height: 18rem;
}

.my-swipe :deep(.van-swipe-item img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vote_item {
  height: calc(100% - 5rem);
  overflow: hidden;
  overflow-y: auto;
}

.set_line {
  white-space: pre-line;
}

.back_btn {
  position: fixed;
  right: 1.5rem;
  bottom: 5rem;
}

.rotate {
  transform: rotate(90deg);
}

.vote_btn {
  display: flex;
  align-items: center;
}

.share_btn {
  flex: 1;
  margin: 0.8rem;
  height: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
  color: #e5f1ff;
  background: var(--van-blue);
  border-radius: 2px;
}

.vote_btn :deep(.vote_button) {
  flex: 1;
}
</style>
